import { defineComponent } from "vue";
import { Icon } from "vant";
import { HeaderProps } from "./types";
import { getSize } from "@/command/apiTool";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "header-view",
  props: HeaderProps,
  setup(props) {
    return () => {
      if (!props.title) return null;
      const router = useRouter();
      const onBack = () => {
        if (props.onBack) {
          return props.onBack();
        } else {
          router.back();
        }
      };
      const renderBack = () => {
        return (
          <div
            class={"absolute left-5"}
            style={{ top: `calc(${getSize(22)} /2)` }}
            onClick={onBack}
          >
            <Icon name="arrow-left" size={getSize(22)} />
          </div>
        );
      };
      const renderRight = () => {
        if (!props.right) return null;
        return (
          <div class="flex items-center absolute right-[10px] top-0 bottom-0">
            {props.right()}
          </div>
        );
      };
      return (
        <div
          class={"flex items-center justify-center relative bg-white h-[44px] "}
          style={{ minHeight: getSize(44) }}
        >
          <div class="text-['#333333'] text-[18px] font-ping-fang-bold ">
            {props.title}
          </div>
          {renderRight()}
          {renderBack()}
        </div>
      );
    };
  },
});
